<template>
  <div class="contanier">
    <n-data-table
    :columns="columns"
    :data="data"
    :bordered="true"
  />
  </div>
</template>
<script setup>
 import { ref,h } from 'vue'
 import { NButton } from "naive-ui";
 const columns = [
 {
      title: "No",
      key: "no"
    },
    {
      title: "Title",
      key: "title"
    },
    {
      title: "Length",
      key: "length"
    },
    {
      title: "Action",
      key: "actions",
      render(row) {
        return h (
          NButton,
          {
            strong: true,
            tertiary: true,
            size: "small",
            onClick: () => play(row)
          },
          { default: () => "哈喽" }
        )
      }
    }
 ]
 const data = [
  { no: 3, title: "Wonderwall", length: "4:18" },
  { no: 4, title: "Don't Look Back in Anger", length: "4:48" },
  { no: 12, title: "Champagne Supernova", length: "7:27" }
];
</script>
<style scoped lang="less">
.contanier {
  width: 100%;
  height: 100%;

}
</style>